<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script  src="../js/vue.js"></script>  
<script  src="../js/jquery.min.js"></script>
</head>

<body>
   <div id="app">
   <header-div></header-div>
   <footer-div></footer-div>
   </div>
   <template id="header_div">
      <header @click="changeTitle">{{title}}</header>
   </template>
   
   
   <template id="footer_div">
    <footer><input v-model="txt" ></footer>
  </template>
   
</body>
<script>
let bus = new Vue();

let header={
template:'#header_div',
data:function(){
return{
 title:'头部'
}
},
methods:{
changeTitle:function(){
bus.$emit('toChangeTitle','首页')

}
}
};

Vue.component('headerDiv',header);


//---footor----
let footer={
template:'#footer_div',
data:function(){
return{
txt:'尾部'
}
},
mounted:function(){
 bus.$on('toChangeTitle', function (title) {
            console.log(title);
			this.txt=title;
			console.log(this.txt);
        })
}
}

Vue.component('footerDiv',footer);



new Vue({
el:'#app'

})

</script>



</html>